
<template>
  <el-row>
    <el-col class="header" :span="24">
      <el-row>
        <el-col :span="8">
          <div style="cursor:pointer;color:white" @click="$router.push('/dashboard')">
            <i class="fa fa-arrow-left" style="margin-left:20px"></i>
          </div>
        </el-col>
        <el-col :span="8" class="headerTitle">
          江苏省句容经济开发区（黄梅街道）智慧联动中心
        </el-col>
        <el-col :span="8" align="right">
          <i @click="full?exitScreen():fullScreen()" class="fa fa-arrows-alt full-screen"></i>
        </el-col>
      </el-row>
    </el-col>

    <el-col :span="24">
      <div style="margin-bottom:10px;margin-top: 60px;">
        <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;padding:0;margin:0" width="100%" cellspacing="0">
          <tr class="tableTitle">
            <td colspan="21" style="border:1px solid #1d8ce0">
              <el-col :span="12" style="text-align:left;line-height:30px;font-size:17px;font-weight:bold;height:30px;">
                <i class="fa fa-file-text-o"></i>
                各区域{{getCurrentType()}}事件接单数汇总统计
              </el-col>
              <el-col :span="12" style="height:30px">
                <div class="search">
                  <el-button size="small" style="color:dark" type="text">请选择事件类型：</el-button>
                  <el-select  size="small"  v-model="filter.type" @change="changeData">
                    <el-option v-for="(v,i) in types" :key="i" :label="v.name" :value="v.value">
                    </el-option>
                  </el-select>
                  <el-button  size="small"  type="text">请选择日期范围：</el-button>
                  <el-date-picker  size="small"  v-model="time1" type="daterange" @change="change1" placeholder="选择日期范围">
                  </el-date-picker>
                  <el-button  size="small" type="primary"  @click="flush"> <i class="fa fa-refresh fa-spin"></i>刷新</el-button>
                </div>
              </el-col>
            </td>
          </tr>
          <tr class="tableText">
            <td>地区</td>
            <td v-for="(v,index) in currentArea" :key="index">
              {{v}}
            </td>
            <td>合计</td>
          </tr>
          <tr class="tableText">
            <td>接单数</td>
            <td v-for="(v,index) in currentData" :key="index">
              <span>{{v}}</span>
            </td>
            <td>
              {{getSum(currentData)}}
            </td>
          </tr>
        </table>
      </div>
    </el-col>
    <el-col :span="24">
      <div class="outer">
        <div @click="moveLeft" v-show="show" @mouseenter="enter()" @mouseleave="leave()" class="left">
          <i @click="moveLeft" class="el-icon-arrow-left"></i>
        </div>
        <div @click="moveRight" v-show="show" @mouseenter="enter()" @mouseleave="leave()" class="right">
          <i @click="moveRight" class="el-icon-arrow-right"></i>
        </div>
        <ul ref="myul" @mouseenter="enter()" @mouseleave="leave()">
          <li v-for="(v,i) in tabs" :key="i">
            <div class="chart_li" :id="'chart'+(i+1)" style="width:33vw;height:350px;"></div>
          </li>
        </ul>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import * as api from "../../api/performance";

export default {
  data() {
    return {
      timer: null,
      full: false,
      activeName: "report",
      histogram: null,
      type: ["社会治安事件", "矛盾纠纷事件", "交通事故", "网格巡防事件"],
      area: [],
      chart: null,
      time1: [],
      autogestion: null, // 自管
      emergency: null, // 紧急
      imperative: null, // 强制
      notPass: null, // 回复不实
      overtimeSolved: null, // 超时处置
      overtimeUnsolved: null, // 超时未处置
      report: null, //接单数
      return: null, //推诿
      rework: null, //返工
      timely: null, //及时
      currentArea: [],
      currentData: [],
      currentTitle: null,
      filter: {
        type: "01",
        start: null,
        end: null
      },
      tabs: [
        {
          name: "接单数",
          value: "report",
          data: null
        },
        {
          name: "应急处置数",
          value: "emergency",
          data: null
        },
        {
          name: "及时处置数",
          value: "timely",
          data: null
        },
        {
          name: "返工数",
          value: "rework",
          data: null
        },
        {
          name: "超时处置数",
          value: "overtimeSolved",
          data: null
        },
        {
          name: "超时未处置数",
          value: "overtimeUnsolved",
          data: null
        },
        {
          name: "推诿案件数",
          value: "return",
          data: null
        },
        {
          name: "回复不实案件数",
          value: "notPass",
          data: null
        },
        {
          name: "强制派单数",
          value: "imperative",
          data: null
        },
        {
          name: "自管工单",
          value: "autogestion",
          data: null
        }
      ],
      types: [
        {
          value: "01",
          name: "社会治安"
        },
        {
          value: "02",
          name: "矛盾纠纷"
        },
        {
          value: "03",
          name: "交通事故"
        },
        {
          value: "04",
          name: "网格巡防"
        },
        {
          value: "05",
          name: "问题上报"
        }
      ],
      show: false,
      ul: null
    };
  },
  methods: {
    moveLeft() {
      let ul = this.$refs.myul;
      let width = this.$jquery(".chart_li").outerWidth();
      if (ul.scrollLeft > width) {
        ul.scrollLeft -= width;
      } else {
        ul.scrollLeft = 0;
      }
    },
    moveRight() {
      let ul = this.$refs.myul;
      let width = this.$jquery(".chart_li").outerWidth() * 7;
      if (ul.scrollLeft < width) {
        ul.scrollLeft += this.$jquery(".chart_li").outerWidth();
      } else {
        ul.scrollLeft = width;
      }
    },
    enter() {
      this.show = true;
      clearInterval(this.timer);
    },
    leave() {
      this.show = false;
      this.initScroll();
    },
    //全屏
    fullScreen() {
      var el = document.documentElement;
      var rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen;
      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
      }
      this.full = true;
      return;
    },
    //退出全屏
    exitScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      }
      this.full = false;
    },
    change1(value) {
      if (value.length > 0) {
        let arr = value.split(" - ");
        this.filter.start = arr[0];
        this.filter.end = arr[1];
      } else {
        this.filter.start = null;
        this.filter.end = null;
      }
      this.init();
    },
    flush() {
      this.time1 = [];
      this.filter.start = null;
      this.filter.end = null;
      this.init();
    },
    getSum(data) {
      let sum = 0;
      for (let i = 0; i < data.length; i++) {
        sum += data[i];
      }
      return sum;
    },
    initChart(datas, title, name, chartName) {
      this.chart = echarts.init(document.getElementById(chartName));
      this.chart.setOption({
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        color: ["#58B7FF"],
        title: {
          text: title,
          x: "center",
          textStyle: {
            fontsize: "16px",
            color: "#475669"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            color: "rgb(150,150,150)",
            type: "category",
            data: datas[0],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: -30
            },
            axisLine: {
              lineStyle: {
                color: "#363636"
              }
            }
          }
        ],
        yAxis: [
          {
            name: "单位: 件",
            type: "value",
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#363636"]
              }
            },
            nameTextStyle: {
              color: ["#363636"]
            },
            axisLine: {
              lineStyle: {
                color: "#363636",
                width: 1 //这里是为了突出显示加上的
              }
            }
          }
        ],
        series: [
          {
            name: name,
            type: "bar",
            barWidth: "50%",
            data: datas[1]
          }
        ]
      });
    },
    handleClick({ name }) {
      this.currentArea = this[name][0];
      this.currentData = this[name][1];
      this.currentTitle = this.getTitle(name);
    },
    changeData() {
      this.init();
    },
    getTitle(key) {
      switch (key) {
        case "autogestion":
          return "自管工单数";
        case "emergency":
          return "应急处置数";
        case "imperative":
          return "强制派单数";
        case "notPass":
          return "回复不实数";
        case "overtimeSolved":
          return "超时处置数";
        case "overtimeUnsolved":
          return "超时未处置数";
        case "report":
          return "接单数";
        case "return":
          return "推诿案件";
        case "rework":
          return "返工数";
        case "timely":
          return "及时处置数";
      }
    },
    getCurrentType() {
      for (let i = 0; i < this.types.length; i++) {
        if (this.types[i].value == this.filter.type) {
          return this.types[i].name;
        }
      }
    },
    initScroll() {
      let ul = this.$refs.myul;
      let width = this.$jquery(".chart_li").outerWidth() * 7;
      if (ul.scrollLeft != undefined)
        (this.timer!=null)&&clearInterval(this.timer);
        this.timer = setInterval(() => {
          if (ul.scrollLeft - 10 <= width) {
            ul.scrollLeft += 3;
          } else {
            ul.scrollLeft = 0;
          }
        }, 100);
    },
    init() {
      if (sessionStorage.jxtabs != null) {
        JSON.parse(sessionStorage.jxtabs).forEach((x, i) => {
          this.initChart(
            x.data,
            "[" +
              (i + 1) +
              "]" +
              this.getCurrentType() +
              this.getTitle(x.value) +
              "统计",
            this.getTitle(x.value),
            "chart" + (i + 1)
          );
        });
        // this.initScroll();
      }
      api.getEventDataForCheck(this.filter).then(res => {
        this.currentArea = res.data.report[0];
        this.currentData = res.data.report[1];
        this.currentTitle = this.getTitle("report");
        Object.keys(res.data).forEach((key, index) => {
          this[key] = res.data[key];
          this.tabs.forEach((x, i, arr) => {
            if (x.value == key) {
              arr[i].data = res.data[key];
            }
          });
        });
        var x = JSON.stringify(this.tabs);
        sessionStorage.jxtabs = x;
        this.tabs.forEach((x, i) => {
          this.initChart(
            x.data,
            "[" +
              (i + 1) +
              "]" +
              this.getCurrentType() +
              this.getTitle(x.value) +
              "统计",
            this.getTitle(x.value),
            "chart" + (i + 1)
          );
        });
        this.$message({
          type: "success",
          message: "查询成功！"
        });
        this.initScroll();
      });
    }
  },
  mounted() {
    this.init();
  },
  destroyed() {
    this.timer = null;
  }
};
</script>

<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  padding: 10px;
  text-align: center;
  border: 1px solid #eee;
  box-sizing: border-box;
}
.header {
  height: 60px;
  width: 100%;
  background: linear-gradient(to right, #FF4949, blue); /* 标准的语法 */
  line-height: 60px;
  position: fixed;
  z-index: 1000;
}
.headerTitle {
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  user-select: none;
}
.full-screen {
  color: white;
  margin-right: 20px;
  font-size: 20px;
  cursor: pointer;
}
.search {
  width: 100%;
  line-height: 30px;
  margin-top: -2px;
  position: relative;
  text-align: right;
}
.tableTitle {
  color: white;
  text-align: left;
  background: linear-gradient(to right, #1d8ce0, whitesmoke); /* 标准的语法 */
}
.tableText {
  font-size: 16px;
  background-image: -webkit-linear-gradient(
    bottom,
    rgb(201, 115, 255),
    rgb(20, 11, 255)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.outer {
  height: 370px;
  width: 100%;
  position: absolute;
  overflow: hidden;
  background: white;
}
ul {
  list-style: none;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  transition: 1s;
}
li {
  display: inline-block;
  transition: 1s;
}
.left {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  color: white;
  background: black;
  opacity: 0.5;
  position: absolute;
  left: 0;
  top: 150px;
  z-index: 1000;
  cursor: pointer;
}
.right {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  color: white;
  background: black;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 150px;
  z-index: 1000;
  cursor: pointer;
}
</style>
